<template>
  <div>
    <bread ref="bread"></bread>
    <el-card>
      <el-table :data="rightsList" border stripe>
         <el-table-column  label="#" type="index"></el-table-column>
         <el-table-column  label="权限名称" prop="authName"></el-table-column>
         <el-table-column  label="路径" prop="path"></el-table-column>
         <el-table-column  label="权限等级" prop="level">
           <template slot-scope="scope">
             <el-tag v-if="scope.row.level ==='0' " type="success">一级</el-tag>
             <el-tag v-if="scope.row.level ==='1' ">二级</el-tag>
             <el-tag v-if="scope.row.level ==='2' " type="warning">三级</el-tag>
           </template>
         </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>


<script>
import bread from "@/components/bread";
export default {
  name: "rights",
  components:{bread},
  data(){
    return {
      rightsList:[],
      breadList:[]
    }
  },
  async created() {
    this.getRigthsList()
    const { data: res } = await this.$http.get('menus')
    this.breadList.push(res.data[1].authName)
    this.breadList.push(res.data[1].children[1].authName)
    this.$refs.bread.getBreadList(this.breadList)
  },
  methods:{
   async getRigthsList(){
        const { data:res} = await this.$http.get('rights/list')
     console.log(res)
         this.rightsList = res.data
    }
  }
}
</script>

<style scoped>
.el-card{
  margin-top: 20px;
}
</style>
